<template>
    <el-dialog title="添加人员" :visible.sync="value" :before-close="close" width="700px">
        <el-form :model="formData" :rules="formRules" ref="formRef">
            <el-form-item prop="name" label="姓名">
                <el-input placeholder="请填写姓名" v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item prop="sex" label="性别">
                <el-radio v-model="formData.sex" label="0">男</el-radio>
                <el-radio v-model="formData.sex" label="1">女</el-radio>
            </el-form-item>
            <el-form-item prop="department" label="所在部门">
                <el-select v-model="formData.department">
                    <el-option></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="phone" label="联系方式">
                <el-input placeholder="请填写联系方式" v-model.number="formData.phone"></el-input>
            </el-form-item>
            <el-form-item prop="address" label="住址">
                <el-input placeholder="请填写住址" v-model="formData.address"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button type="primary" @click="submit">添加</el-button>
            <el-button @click="close">关闭</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    data() {
        var nameValidator=(rule,value,callback)=>{
            let reg = /\^[\u4E00-\u9FA5]{" + min+","+max + "\}$/
            if(!reg.test(value)){
                callback(new Error('请填写真实姓名'))
            }else{
                callback()
            }
        }
        return {
            formData:{
                name:"",
                sex:"",
                department:"",
                phone:"",
                address:"",
            },
            formRules:{
                name:[
                    { required:true,message:'请填写姓名',trigger:'blur' },
                    { validator:nameValidator,message:'请填写真实姓名',trigger:'blur' }
                ],
                sex:[
                    { required:true,message:'请选择性别',trigger:'blur' }
                ],
                department:[
                    { required:true,message:'请选择所在部门',trigger:'blur' }
                ],
                phone:[
                    { required:true,message:'请填写联系方式',trigger:'blur',type:'number' },
                ]
            },
            
        }
    },
    props: {
        value: Boolean
    },
    methods: {
        submit(){
            this.$refs.formRef.validate((valid)=>{
                if(valid){
                    console.log('yes')
                }
            })
        },
        close(){
            Object.assign(this.$data,this.$options.data())
            this.$emit('input',false)
        }
    }
}
</script>